<template>
  <div class='container'>
    <div class='header-container'>
      <img class='header-img' src='../../assets/images/home/banner.png'>
    </div>
    <div class='wrapper'>
      <div class='info-pub' @click='goToInfo'>
        <div class='info-pub-icon'>
          <img class='info-pub-icon-img'  src='../../assets/images/home/info.png'>
        </div>
        <div>
          <div class='info-pub-container'>疫情信息发布</div>
          <div>查询疫情动态，掌握实时信息</div>
        </div>
        <div class='info-pub-rightIcon' >
          <img class='info-pub-rightIcon-img'  src='../../assets/images/home/右三角.png'>
        </div>
      </div>
      <div class='hospital'>
        <div class='hospital-title'>
          医院通
        </div>
        <div class='hospital-container'>
          <div class='hospital-bed' @click='goToNeedEnterBed'>
            <div class='hospital-bed-icon'>
              <img class='hospital-bed-icon-img'  src='../../assets/images/home/bed.png'>
            </div>
            <div >
              <div class='hospital-bed-desc'>医院床位上报</div>
              <div>第一时间掌握医院床位</div>
            </div>
            <div class='hospital-bed-rightIcon' >
              <img class='hospital-bed-rightIcon-img'  src='../../assets/images/home/右三角.png'>
            </div>
          </div>
          <div class='hospital-bed' @click="goToNeedEnterNurse">
            <div class='hospital-bed-icon'>
              <img class='hospital-bed-icon-img'  src='../../assets/images/home/person.png'>
            </div>
            <div style='margin-right: 28px;'>
              <div class='hospital-bed-desc'>医院人员上报</div>
              <div>做好医护人员防护</div>
            </div>
            <div class='hospital-bed-rightIcon' >
              <img class='hospital-bed-rightIcon-img'  src='../../assets/images/home/右三角.png'>
            </div>
          </div>
          <div class='hospital-bed' @click='goToNeedEnterMaterial'>
            <div class='hospital-bed-icon'>
              <img class='hospital-bed-icon-img'  src='../../assets/images/home/goods.png'>
            </div>
            <div style='margin-right: 20px;'>
              <div class='hospital-bed-desc'>医院物资需求上报</div>
              <div>全力保障医护人员</div>
            </div>
            <div class='hospital-bed-rightIcon' >
              <img class='hospital-bed-rightIcon-img'  src='../../assets/images/home/右三角.png'>
            </div>
          </div>
        </div>
      </div>
      <div class='resident'>
        <div class='resident-title'>
          社区通
        </div>
        <div class='resident-container'>
          <div class='resident-item' @click="goToEpidemicHome">
            <div class='resident-icon'>
              <img class='resident-icon-img'  src='../../assets/images/home/self-report.png'>
            </div>
            <div >
              <div class='resident-desc'>居民自查自报（全）</div>
              <div>及时申请自我身边线索</div>
            </div>
            <div class='resident-rightIcon' >
              <img class='resident-rightIcon-img'  src='../../assets/images/home/右三角.png'>
            </div>
          </div>
          <div class='resident-item' @click="goToPersonInforation">
            <div class='resident-icon'>
              <img class='resident-icon-img'  src='../../assets/images/home/self-report-j.png'>
            </div>
            <div style='padding-right: 1px;'>
              <div class='resident-desc'>居民自查自报（简）</div>
              <div>自我排查申报,居家隔离</div>
            </div>
            <div class='resident-rightIcon' style='margin-left: 5px;' >
              <img class='resident-rightIcon-img'  src='../../assets/images/home/右三角.png'>
            </div>
          </div>
        </div>
      </div>
      <div class='info-pub' @click='goToEnterpriseInforation'>
        <div class='info-pub-icon'>
          <img class='info-pub-icon-img'  src='../../assets/images/home/enterprise.png'>
        </div>
        <div style='width: 205px;'>
          <div class='info-pub-container'>企业复工自查自报</div>
          <div>自我排查疑似发烧，为疫情出一份力</div>
        </div>
        <div class='info-pub-rightIcon' style='margin-left: 1px;' >
          <img class='info-pub-rightIcon-img'  src='../../assets/images/home/右三角.png'>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    goToInfo() {
      this.$router.push({ path:'/home'})
    },
    goToNeedEnterBed() {
      this.$router.push({ path:'/needEnterBedNum'})
    },
    goToNeedEnterNurse() {
      this.$router.push({ path:'/needEnterNurse'})
    },
    goToNeedEnterMaterial() {
      this.$router.push({ path:'/needEnterMaterial'})
    },
    goToEpidemicHome() {
      this.$router.push({ path:'/epidemicHome'})
    },
    goToPersonInforation() {
      this.$router.push({ path:'/personInforation'})
    },
    goToEnterpriseInforation() {
      this.$router.push({ path:'/enterpriseInforation'})
    }
  }
}
</script>
<style lang='less' scoped="">
.container {
  position: absolute;
  width: 100%;
  min-height: 130%;
  background: rgb(245, 245, 245);
  .header-container {
    position: absolute;
    width: 100%;
    height: 234px;

    .header-img {
      width: 100%;
      height: 234px;
    }
  }
  .wrapper {
    position: absolute;
    top: 178px;
    width: 87%;
    // height: 600px;
    left: 6.5%;
    // border: 1px solid red;
    .info-pub {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      width: 100%;
      height: 112px;
      margin-bottom: 16.5px;
      // border: 1px solid;
      border-radius: 5px;
      background: #fff;
      box-shadow: 5px 5px 5px rgb(216, 216, 216);
      .info-pub-container {
        font-size:20px; 
        font-weight: 500;
      }
      .info-pub-icon {
        width: 60px;
        height: 60px;
        margin-left: 19px;
        margin-right: 19px;
        .info-pub-icon-img {
           width: 60px;
           height: 60px;
        }
      }
      .info-pub-rightIcon {
        width: 7.5px;
        height: 13.5px;
        margin-left: 22px;
        .info-pub-rightIcon-img {
           width: 100%;
           height: 100%;
        }
      }
    }
    .hospital {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      width: 100%;
      height: 214px;
      margin-bottom: 16.5px;
      // border: 1px solid;
      border-radius: 5px;
      background: #fff;
      box-shadow: 5px 5px 5px rgb(216, 216, 216);
      .hospital-title {
        width: 60px;
        height: 31px;
        line-height: 30px;
        font-size: 18px;
        font-weight: 600;
        margin-left: 15px;
        margin-right: 19px;
        background: url('../../assets/images/home/bj02.png') top left no-repeat ;
      }
      .hospital-container {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-start;
        width: 237px;
        height: 214px;
        .hospital-bed {
          display: flex;
          flex-direction: row;
          justify-content: flex-start;
          align-items: center;
          width: 100%;
          height: 112px;
          .hospital-bed-icon {
            width: 45px;
            height: 45px;
            margin-right: 15px;
            .hospital-bed-icon-img {
              width: 100%;
              height: 100%;
            }
          }
          .hospital-bed-desc {
            font-size: 15px;
          }
          .hospital-bed-rightIcon {
            margin-left: 10px;
            width: 7.5px;
            height: 13.5px;
            .hospital-bed-rightIcon-img {
              width: 100%;
              height: 100%;
        }
          }
        }
      }
    }
    .resident {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      width: 100%;
      height: 160px;
      margin-bottom: 16.5px;
      // border: 1px solid;
      border-radius: 5px;
      background: #fff;
      box-shadow: 5px 5px 5px rgb(216, 216, 216);
      .resident-title {
        width: 60px;
        height: 31px;
        line-height: 30px;
        font-size: 18px;
        font-weight: 600;
        margin-left: 15px;
        margin-right: 19px;
        background: url('../../assets/images/home/bj03.png') top left no-repeat ;
      }
      .resident-container {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-start;
        width: 237px;
        height: 148px;
        .resident-item {
          display: flex;
          flex-direction: row;
          justify-content: flex-start;
          align-items: center;
          width: 100%;
          height: 112px;
          .resident-icon {
            width: 45px;
            height: 45px;
            margin-right: 15px;
            .resident-icon-img {
              width: 100%;
              height: 100%;
            }
          }
          .resident-desc {
            font-size: 15px;
          }
          .resident-rightIcon {
            margin-left: 10px;
            width: 7.5px;
            height: 13.5px;
            .resident-rightIcon-img {
              width: 100%;
              height: 100%;
        }
          }
        }
      }
    }
  }
}
</style>
